@import "./common";

.navbar{
    margin-bottom: 0;
}

.banner{
    .carousel{
        .item{
            img{
                width: 100%;
            }
        }
        .carousel-control{
            background-image: none;
        }
    }
}

.lieren,.princess{
    padding-top: 20px;
    padding-bottom: 0px;
    .container{
        .row{
            margin-bottom: 38px;
            .hot{
                img{
                    width: 100%;
                }
            }
            .hot-text{
                h2{
                    font-size: 30px;
                    text-align: right;
                    margin-bottom: 20px;
                }
                p{
                    text-indent: 9px;
                    width: 100%;
                    font-size: 12px;
                    color: #ababab;
                    margin-bottom: 20px;
                    line-height: 24px;
                    text-align: right;
                }
                .hot-img{
                    img{
                        width: 100%;
                        margin-bottom: 26px;
                    }
                }
            }
        }
    }
}

.princess{
    padding-top: 0;
    .container{
        .row{
            .hot-text{
                // padding-left: 12px;
            }
        }
    }
}

.more-case{
    .container{
        h2{
            font-size: 36px;
        }
        .case-wrapper{
            margin-bottom: 70px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-around;
            .case-item{
                flex: 0 0 30%;
                margin-top: 20px;
                img{
                    width: 100%;
                }
                p{
                    font-size: 14px;
                    text-align: center;
                    position: relative;
                    top: 10px;
                }
            }

            .case-text{
                flex: 0 0 30%;
                
                .mask-box{
                    position: relative;
                    .mask{
                        width: 100%;
                        height: 100%;
                        font-size: 12px;
                        padding: 5%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        background-color: black;
                        opacity: .6;
                        color: #fff;
                        line-height: 20px;
                        img{
                            width: 100%;
                        }
                    }
                }
                
                p{
                    position: relative;
                    top: 10px;
                }
            }

            
        }
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px){
    .lieren,.princess{
        .container{
            .row{
                .hot-text{
                    h2{
                        margin-top: 12px;
                        margin-bottom: 12px;
                    }
                }
            }
        }
    }

    .more-case{
        .container{
            h2{
                font-size: 30px;
            }
            .case-wrapper{
                .case-text{
                    .mask{
                        padding: 3% 2% 6%;
                        bottom: 20%;
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 768px) and (max-width: 992px){
    .lieren,.princess{
        .container{
            .row{
                margin-bottom: 20px;
                .hot-text{
                    padding-left: 8px;
                    h2{
                        font-size: 23px;
                        margin-top: 4px;
                        margin-bottom: 6px;
                        text-align: left;
                    }
                    .hot-img{
                        img{
                            width: 100%;
                        }
                    }
                    p{
                        text-align: left;
                    }
                }
            }
        }
    }

    .more-case{
        .container{
            h2{
                font-size: 23px;
                margin-bottom: 0;
            }
        }
    }
}

@media screen and (max-width: 768px){
    .lieren,.princess{
        padding-top: 0;
        .container{
            .row{
                margin-bottom: 0;
                padding: 0px 14px 0;
                .hot-text{
                    h2{
                        font-size: 23px;
                        margin-bottom: 8px;
                        text-align: left;
                    }
                    p{
                        text-align: left;
                        line-height: 19px;
                        text-indent: 0;
                        margin-bottom: 14px;
                    }
                    .hot-img{
                        div{
                            padding-right: 8px;
                            padding-left: 8px;
                            img{
                                margin-bottom: 16px;
                            }

                        }
                        div:nth-of-type(3),div:nth-of-type(4){
                            img{
                                margin-bottom: 0;
                            }
                        }
                    }
                }
                
            }
        }
    }

    .more-case{
        margin-bottom: 20px;
        .container{
            h2{
                font-size: 22px;
                margin-bottom: 0;
            }
            .case-wrapper{
                margin-bottom: 0;
                .case-text{
                    p{
                        position: relative;
                        top: 4px; 
                    }
                }
                .case-item{
                    margin-top: 8px;
                    p{
                        position: relative;
                        top: 4px;
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}